<template>
  <a-modal :width="1100" v-model:visible="showDetailDialog" title="供应商报价详情" :footer="false" top="8vh" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <div class="detail-w">
      <div class="header">
        <p class="title">基础信息</p>
      </div>
      <a-form ref="formRef" :model="formInfo">
        <a-row>
          <a-col :span="6">
            <a-form-item label="报价ID：" label-col-flex="80px">
              <p>{{ formInfo.billNo }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="更新时间：" label-col-flex="100px">
              <p>{{ $setTime(formInfo.gmtWrite) }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="经销商：" label-col-flex="100px">
              <p>{{ formInfo.companyName }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="销售员：" label-col-flex="100px">
              <p>{{ formInfo.createUname }}</p>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <a-form-item label="供应商：" label-col-flex="80px">
              <p>{{ formInfo.supplierName }}-{{ formInfo.supplierCode }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="采购员：" label-col-flex="100px">
              <p>{{ formInfo.purchaseUname }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="交期：" label-col-flex="100px">
              <p>{{ formInfo.deliveryDays }}天</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="最小起订量：" label-col-flex="100px">
              <p>{{ formInfo.moq }}</p>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <a-form-item label="币种：" label-col-flex="80px">
              <p>{{ formInfo.currency }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="发票类型：" label-col-flex="100px">
              <p>{{ invoiceTypeMap[formInfo.invoiceType] }}</p>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="parTaxRate" label="票面税率：" label-col-flex="100px">
              <span>{{ formInfo.parTaxRate }}</span>
              <span>%</span>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="退税率：" label-col-flex="100px">
              <span>{{ formInfo.refundTaxRate }}</span>
              <span>%</span>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row style="margin-top: 20px">
          <a-col :span="20">
            <a-form-item hide-label>
              <a-radio-group v-model="formInfo.quoteType">
                <a-radio :value="1" v-if="formInfo.quoteType === 1">非梯度报价</a-radio>
                <a-radio :value="2" v-if="formInfo.quoteType === 2">梯度报价</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 非梯度报价 -->
        <a-row v-if="formInfo.quoteType === 1">
          <a-col :span="7">
            <a-form-item label="不含税单价：" label-col-flex="100px">
              <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
              <span>{{ formInfo.priceInfo.price }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="税额：" label-col-flex="100px">
              <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
              <span>{{ ((Number(formInfo.priceInfo.price || 0) * Number(formInfo.parTaxRate || 0)) / 100).toFixed(2) }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="7">
            <a-form-item label="含税单价：" label-col-flex="100px">
              <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
              <span>{{ formInfo.priceInfo.taxPrice }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="5">
            <a-form-item label="可退税额：" label-col-flex="100px">
              <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
              <span>{{ ((Number(formInfo.priceInfo.taxPrice || 0) * Number(formInfo.refundTaxRate || 0)) / 100).toFixed(2) }}</span>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 梯度报价 -->
        <a-row v-else>
          <a-col :span="24">
            <a-table class="table-normal-line" ref="tableRef" row-key="id" :data="formInfo.quoteItems" size="mini" :bordered="false" :pagination="false">
              <template #columns>
                <a-table-column :width="120">
                  <template #title>
                    <p>
                      <span class="warningColor">*</span>
                      <span>数量</span>
                    </p>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item :field="rowIndex + 'quantity'" hide-label style="margin-bottom: 0">
                      <span style="margin-right: 5px">>=</span>
                      <span>{{ record.quantity }}</span>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column :width="120">
                  <template #title>
                    <p>
                      <span class="warningColor">*</span>
                      <span>不含税单价</span>
                    </p>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item :field="rowIndex + 'price'" hide-label style="margin-bottom: 0">
                      <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
                      <span>{{ record.price }}</span>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="税额" :width="100">
                  <template #cell="{ record }">
                    <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
                    <span>{{ ((Number(record.price || 0) * Number(formInfo.parTaxRate || 0)) / 100).toFixed(2) }}</span>
                  </template>
                </a-table-column>
                <a-table-column :width="120">
                  <template #title>
                    <p>
                      <span class="warningColor">*</span>
                      <span>含税单价</span>
                    </p>
                  </template>
                  <template #cell="{ record, rowIndex }">
                    <a-form-item :field="rowIndex + 'taxPrice'" hide-label style="margin-bottom: 0">
                      <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
                      <span>{{ record.taxPrice }}</span>
                    </a-form-item>
                  </template>
                </a-table-column>
                <a-table-column title="可退税额" :width="100">
                  <template #cell="{ record }">
                    <span style="margin-right: 5px">{{ currencySymbol[formInfo.currency] || '￥' }}</span>
                    <span>{{ ((Number(record.taxPrice || 0) * Number(formInfo.refundTaxRate || 0)) / 100).toFixed(2) }}</span>
                  </template>
                </a-table-column>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-form>
      <div class="header flex-c" style="margin-top: 20px">
        <p class="title">报价产品</p>
        <a-space style="margin-right: 40px">
          <FilterKeyword ref="filterKeywordRef" :currentItem="filterVal" @search="searchPro" />
          <a-button type="primary" @click="filterKeywordRef.search()">搜索</a-button>
        </a-space>
      </div>
      <div class="product-w">
        <a-table class="table-singe-line" ref="tableRef" row-key="sku" :data="filterProductItems" :scroll="{ y: 500 }" size="mini" :bordered="false" :pagination="false">
          <template #columns>
            <a-table-column data-index="sort" title="序号" :width="45">
              <template #cell="{ rowIndex }">
                <p>{{ rowIndex + 1 }}</p>
              </template>
            </a-table-column>
            <a-table-column data-index="img" title="图片" :width="60">
              <template #cell="{ record }">
                <ImgPopover :src="record.productImg">
                  <template #con>
                    <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                  </template>
                </ImgPopover>
              </template>
            </a-table-column>
            <a-table-column title="产品名称/类目" :width="180">
              <template #cell="{ record }">
                <TextLimit :rows="1">{{ record.productName }}</TextLimit>
                <p>{{ record.cateName || '--' }}</p>
              </template>
            </a-table-column>
            <a-table-column data-index="sku" title="经销商SKU" :width="140">
              <template #cell="{ record }">
                <ShowSpuDetailBySku :val="record.sku" :showLimit="false" />
              </template>
            </a-table-column>
            <a-table-column data-index="spu" title="经销商SPU" :width="140" />
            <a-table-column data-index="ssku" title="供应商SKU" :width="140" />
            <a-table-column data-index="sspu" title="供应商SPU" :width="140" />
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
  <!-- 选择采购产品 -->
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { currencySymbol } from '@/utils/globalData'
  import FilterKeyword from '@/components/Form/filterKeyword.vue'
  onMounted(() => {
    setDefaultData()
  })
  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    currentItem: {
      type: Object,
      default: () => {},
    },
  })
  const invoiceTypeMap = {
    0: '不开票',
    1: '普票',
    2: '专票',
  }
  const filterVal: any = {
    key: 'sku',
    keyItems: [
      { label: '经销商SKU', value: 'sku' },
      { label: '经销商SPU', value: 'spu' },
      { label: '供应商SKU', value: 'ssku' },
      { label: '产品名称', value: 'productName' },
    ],
    keyWidth: '120',
    value: null,
    placeholder: '请输入',
    label: '',
    width: 250,
    isMultiple: true,
  }
  const showDetailDialog = ref(props.isShow)
  const formInfo = ref<any>({
    priceInfo: {},
    quoteItems: [{}],
    quoteType: 1,
  })
  const productItems = ref<Array<any>>([])
  const filterProductItems = ref<Array<any>>([])
  const formRef = ref()
  const filterKeywordRef = ref()

  // 添加初始化数据
  function setDefaultData() {
    formInfo.value = JSON.parse(JSON.stringify(props.currentItem))
    productItems.value = formInfo.value.quoteProducts
    filterItem()
    // 非梯度报价
    if (formInfo.value.quoteType === 1) {
      formInfo.value.priceInfo = formInfo.value.quoteItems?.[0] || {}
    }
  }
  // 筛选产品列表
  function searchPro(info?: any) {
    filterVal.key = info?.key
    filterVal.value = info?.value
    filterItem()
  }
  function filterItem() {
    let valArr = filterVal.value?.split(',') || []
    valArr = valArr.filter((str: string) => str?.trim())
    let key = filterVal.key
    if (!key || !valArr.length) {
      filterProductItems.value = JSON.parse(JSON.stringify(productItems.value))
    } else {
      filterProductItems.value = []
      productItems.value.forEach((el: any) => {
        if (valArr.includes(el[key])) {
          filterProductItems.value.push(el)
        }
      })
    }
  }
  // 关闭
  function closedDialog() {
    emit('closed')
    showDetailDialog.value = false
  }
</script>
<style lang="less" scoped>
  .detail-w {
    height: calc(84vh - 100px);
  }
  .arco-row {
    margin-bottom: 0;
  }
  .arco-form-item {
    margin-bottom: 0;
  }
  :deep(.arco-form-item-label-col) {
    padding-right: 0px;
  }
  .header {
    font-size: 14px;
    margin-bottom: 10px;
    border-left: 3px solid rgba(var(--primary-6), 0.5);
    padding-left: 10px;
    .title {
      margin-right: 30px;
      width: 90px;
      font-weight: bold;
    }
  }
</style>
